<template>
    <!--质量检查详情-->
    <div class="listTemplate">
        <mt-header title="质量检查详情" class="header">
            <router-link to="/rectification_Work" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <section class="t-body">
            <!--检查人-->
            <mu-expansion-panel class="noshadow">
                <section class="content">
                    <p>项目名称：{{data.orgName}}</p>
                    <p>检查类型：{{data.checkTypeName}}</p>
                    <p>所属区域：{{data.areaName}}</p>
                    <p>检查部位：{{data.checkParts}}</p>
                    <p>检查结果：{{'暂无数据'}}</p>
                    <p>问题类型：{{data.problemTypeName}}</p>
                    <p>问题等级：{{data.problemLevel}}</p>
                    <p>现场照片：</p>
                    <p>问题描述：{{data.problemDescription}}</p>
                    <p style="display: flex;justify-content: space-between"><span>平面图标记：</span><span style="color:red;">查看>></span></p>
                    <p>整改期限：{{'暂无数据'}}</p>
                    <p>整改要求：{{'暂无数据'}}</p>
                    <p>责任单位：{{data.responsibleUnitName}}</p>
                    <p>整改责任人：{{data.responsibleUserName}}</p>
                    <p>抄送人：{{'暂无数据'}}</p>
                    <p>检查人签字：{{data.checkSignature}}</p>
                </section>
                <div slot="header" class="content-header-title">
                    <span>检查人：马云</span> <br/>
                    <span>检查时间：2019-08-22 12:12</span>
                </div>
            </mu-expansion-panel>
            <!--整改责任人-->
            <mu-expansion-panel class="noshadow">
                <div slot="header" class="content-header-title">
                    <span>整改责任人：张三</span>
                    <p>整改期限：2019-08-22 12:12</p>
                </div>
                <section class="content">
                    <p style="color: rgba(0,0,0,.54);">现场照片</p>
                    <div style="overflow:hidden;width:100%;">
                        <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" :fileList="fileList"
                                  @preview="handlePreview" @change="handleChange">
                            <div v-if="fileList.length < 3" >
                                <a-icon type="plus" />
                                <div>点击上传</div>
                            </div>
                        </a-upload>
                        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                            <img alt="example" style="width: 100%"  :src="previewImage" />
                        </a-modal>
                    </div>

                    <mu-form ref="forms" :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100" style="background-color:#fff;margin-top:10px;padding: 10px;">
                        <mu-form-item prop="describe" label="整改结果描述" :rules="describe">
                            <mu-text-field multi-line :rows="2" :rows-max="5" v-model="form.describe"></mu-text-field>
                        </mu-form-item>
                        <mu-form-item prop="problemClosure" label="申请问题闭合" :rules="problemClosure" style="font-size: 0.12rem;">
                            <mu-radio v-model="form.problemClosure" value="0" @change="close" label="是"></mu-radio>
                            <mu-radio v-model="form.problemClosure" value="1" label="否"></mu-radio>
                        </mu-form-item>
                        <mu-form-item prop="radio" label="短信通知复查人" :rules="argeeRules" style="font-size: 0.12rem;">
                            <mu-radio v-model="form.radio" value="0"   label="是"></mu-radio>
                            <mu-radio v-model="form.radio" value="1" label="否"></mu-radio>
                        </mu-form-item>
                        <mu-form-item prop="textarea" label="整改人签字" :rules="textarea">
                            <mu-text-field multi-line :rows="2" :rows-max="5" v-model="form.textarea"></mu-text-field>
                        </mu-form-item>
                        <mu-button color="primary" @click="Submission">提交</mu-button>
                    </mu-form>
                </section>
            </mu-expansion-panel>
            <!--问题闭合-->
            <a-modal title="提示" v-model="visible" :footer="null">
                <span>确定申请问题闭合？</span>
                <mu-form ref="form"  :model="formClose" class="mu-de mo-form" :label-position="labelPosition" label-width="100" style="background-color:#fff;margin-top:10px;padding: 10px;">
                    <mu-form-item prop="textarea" label="备注" :rules="usernameRules">
                        <mu-text-field multi-line :rows="2" :rows-max="5" v-model="formClose.textarea"></mu-text-field>
                    </mu-form-item>

                    <span>审批人:</span><span style="font-weight: bold">{{checkUserName}}</span>
                    <mu-form-item>
                        <mu-button color="primary" @click="submit">提交</mu-button>
                    </mu-form-item>
                </mu-form>
            </a-modal>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'mainPage',
        data () {
            return {
                describe:[//整改结果描述
                    { validate: (val) => !!val, message: '请填写整改结果描述'},
                    { validate: (val) => val.length <= 150, message: '整改结果描述长度大于150'}
                ],
                textarea:[//整改人签字
                    { validate: (val) => !!val, message: '请填写整改人姓名'},
                    { validate: (val) => val.length <= 20, message: '备注长度大于20'}
                ],
                problemClosure:[//申请闭合
                    { validate: (val) => !!val, message: '请选择是否申请闭合'}
                ],
                argeeRules:[//短信通知复查人
                    { validate: (val) => !!val, message: '请选择是否短信通知复查人'}
                ],
                usernameRules: [ //问题申请闭合
                    { validate: (val) => !!val, message: '请填写问题备注'},
                    { validate: (val) => val.length <= 50, message: '备注长度大于50'}
                ],
                checkUserName:'',//审批人
                data:{},
                visible: false,
                labelPosition: 'left',
                form: {
                    describe:'',//整改结果描述
                    radio: '',//短信通知复查人
                    problemClosure:'',//问题闭合
                    textarea: ''
                },
                formClose:{//问题闭合
                    textarea:"",
                },
                previewVisible: false,
                previewImage: '',
                fileList: [{
                    uid: '-1',
                    name: 'xxx.png',
                    status: 'done',
                    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
                }]
            }
        },
        mounted () {

        },
        created () {
            console.log(this.$route.query);// 获取质量检查列表传递的参数
            this.fetch(this.$route.query.info);
            this.checkUserName = this.$route.query.checkUserName;
        },
        methods: {
            //整改责任提交
            Submission () {
                this.$refs.forms.validate().then((result) => {

                    let request = {
                        id:this.data.checkProblemId,
                        isApplyClose:this.form.problemClosure ,//是否申请问题闭合 0 是 1 否
                        // isNoticeRectification: ,//
                        rectificationResult:this.form.describe, //结果描述
                        rectificationSignature:this.form.textarea, //签名
                        // scenePhotos //现场照片
                    };
                    this.$A.Go('post', '/safety/checkRect/submit',request).then((success) => {
                        if (success.code == 200) {
                            this.$A.MS(success.msg, 'success');
                            this.$refs.forms.clear();
                            this.form={
                                describe:'',//整改结果描述
                                radio: '',//短信通知复查人
                                problemClosure:'',//问题闭合
                                textarea: ''
                            }
                        }
                    })
                });
            },
            //申请问题闭合提交
            submit(){
                this.$refs.form.validate().then((result) => {
                    this.visible = false;
                    this.$A.Go('post', '/safety/checkRect/closeProblem',{
                        taskId:this.data.checkProblemId,
                        approvalUser:this.checkUserName,
                        applyDesc:this.formClose.textarea,//申请问题闭合
                        type:'1',
                    }).then((success) => {
                        if (success.code == 200) {
                            this.$A.MS(success.msg, 'success');
                            this.$refs.form.clear();//清空闭合的输入框
                            this.formClose = {
                                textarea: '',
                            }
                        }else {
                            this.$A.MS('操作失败！', 'error');
                        }
                    })
                });
            },
            close () {//申请问题闭合
                this.visible = true;
            },
            fetch (id) {
                this.$A.Go('get', '/safety/checkRect/detail', {
                    id
                }).then((success) => {
                    if (success.code == 200) {
                        this.data = success.body;
                    }else {

                    }
                })
            },
            handleCancel () {
                this.previewVisible = false
            },
            handlePreview (file) {
                this.previewImage = file.url || file.thumbUrl;
                this.previewVisible = true
            },
            handleChange ({
                              fileList
                          }) {
                this.fileList = fileList
            }
        }
    }
</script>
<style lang="scss" scoped>
    .listTemplate {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;

        .t-header {
            height: 0.45rem;
            width: 100%;
            color: #3D3D3D;
            box-sizing: border-box;
            padding: 5px 8px;
            position: relative;
            // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
            -border-bottom: 1px solid #dedede;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .t-close {
                min-width: 28px;
                border-radius: 50%;
            }

            .t-title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 0.19rem;
                font-weight: 500;
            }

            .t-right-icon {
                font-size: 0.2rem;
            }
        }

        .t-body {
            height: calc(100% - 0.45rem);
            width: 100%;
            overflow: auto;
            background-color: #F8F8F8;
            padding: 10px;
        }

        .t-body+.t-footer {
            height: 0.45rem;
            width: 100%;
        }

        .t-footer+.t-body {
            height: calc(100% - 0.9rem);
        }

        // 自定义样式
        .box {
            padding: 10px 15px;
            background-color: #fff;
        }

        .line-list {
            margin: 15px 0;
            font-size: 0.15rem;
        }

        .textdot {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .table {
            width: 100%;
            height: auto;
            border: 1px solid #dedede;
            font-size: 0.12rem;
            line-height: 0.2rem;

            .tr {
                width: 100%;
                border-bottom: 1px solid #dedede;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .td {
                    border-left: 1px solid #dedede;
                    width: 100%;
                    text-align: center;

                    .tr {
                        border-bottom: 1px solid #dedede;
                        border-left: none;
                    }

                    >.tr:last-child {
                        border: none;
                    }
                }

                >.td:first-child {
                    border: none;
                }

                .tr {
                    border-left: 1px solid #dedede;
                }
            }

            >.tr:last-child {
                border: none;
            }

            .header {
                background-color: #ddd;
                color: #000;
            }

            .subheader {
                background-color: #eee;
                color: #333;
            }
        }
    }
</style>
<style lang="scss">
    .t-close {
        .mu-button-wrapper {
            padding: 0 !important;
        }
    }

    .active-color {
        color: #FF8A1B;
    }

    .td {
        .mu-checkbox-svg-icon {
            height: 20px;
            width: 20px;
        }

        .mu-checkbox {
            line-height: 20px;
            height: 20px;
        }
    }

    .t-body {
        .mu-expansion-panel-header {
            padding: 0 10px;
        }

        .mu-expansion-panel-content {
            padding: 0 5px;
        }

        .mu-expansion-panel__expand .mu-expansion-panel-header {
            min-height: 20px;
        }
    }

    .flex_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .noshadow.mu-elevation-2 {
        box-shadow: none;

    }

    .stepper-lan {
        .mu-step-label {
            position: relative;

            .desc {
                position: absolute;
                top: 5px;
                transform: translateX(-50%);
                left: 50%;
                white-space: nowrap;
                font-size: 0.12rem;
            }

            .deTime {
                font-size: 0.12rem;
                position: absolute;
                bottom: 5px;
                transform: translateX(-50%);
                left: 50%;
                white-space: nowrap;
                font-size: 0.12rem;
            }
        }
    }
</style>
<!-- 新增样式 -->
<style lang="scss">
    .content-header-title {
        font-size: 0.14rem;
        font-weight: 500;
        color: #222222;
    }
    .content {
        font-size: 0.12rem;
        font-weight: 500;
        color: #222222;
        padding: 0.1rem 0.14rem;
    }
</style>
